<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <link rel=stylesheet href="{{=URL('static','css/custom.css')}}" />
    {{include 'web2py_ajax.html'}}
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCnd8q4RAISdT0KwZ8YhTuQhEoW6_bNTYQ&sensor=false&libraries=places"></script>

    <script type="text/javascript">
		var map;
		var addressMarker = "undefined";
		var directionsService = new google.maps.DirectionsService();
		var directionsDisplay = new google.maps.DirectionsRenderer();
		
  function initialize(){
	var mapCenter = new google.maps.LatLng(34.953034, -120.435719);
	var mapOptions = {
	  zoom: 7,
	  center: mapCenter,
	  mapTypeId: google.maps.MapTypeId.ROADMAP,
	};
	map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

	setMarkers(map, stores);

	infowindow = new google.maps.InfoWindow({
	  content: "loading..."
	});
	
	var input = /** @type {HTMLInputElement} */(document.getElementById('userAddressInput'));
	var searchBox = new google.maps.places.SearchBox(input);
	
	directionsDisplay.setMap(map);
	directionsDisplay.setPanel(document.getElementById('contextual_panel'));
	
	$('#loading').hide();
  }

  var stores = [
	{{for row in rawData:}}
	  ["{{=row[0]}}", "{{=row[1]}}", "{{=row[2]}}", "{{=row[3]}}", "{{=row[4]}}"],
	{{pass}}
  ];

      function setMarkers(map, locations) {
        for (var i = 0; i < locations.length; i++) {
          var store = locations[i];
          var myLatLng = new google.maps.LatLng(store[3], store[4]);

          var infoContent = "<b>" + store[1] + "</b><br>" + store[2];

          var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: store[1],
            animation: google.maps.Animation.DROP,
            html: infoContent
            });

          google.maps.event.addListener(marker, "click", function(){
            infowindow.setContent(this.html);
            infowindow.open(map, this);
          });
        }
      }
		
		function centerMap() {
			var address = document.getElementById('userAddressInput').value;
			geocoder = new google.maps.Geocoder();
			geocoder.geocode({ 'address': address }, function(results, status) {
				var blueMarker = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
				if (status == google.maps.GeocoderStatus.OK) {
					if (addressMarker == "undefined") {
					} else {
						addressMarker.setMap(null);
					}
					
					map.setCenter(results[0].geometry.location);
					map.setZoom(15);
					
					addressMarker = new google.maps.Marker({
						map: map,
						icon: blueMarker,
						html: "<b>Your Address</b>",
						position: results[0].geometry.location
					});
					
					google.maps.event.addListener(addressMarker, "click", function(){
					  infowindow.setContent(this.html);
					  infowindow.open(map, this);
					});
				}
			});
		}
		
		function showHideDiv(showid,hideid) {
			$('#'+showid).show();
			$('#'+hideid).hide();
		}
    </script>
  </head>

  <body onload="initialize()">

    <div id="map_canvas"></div>

    <div class="panel">
      <div id="controls">
        <input id="userAddressInput" name="userAddressInput" type="text" placeholder="Your Address" size="30"></input>
        <input type="submit" value="Find Nearest Stores" onclick="showHideDiv('loading','contextual_panel'); ajax('{{=URL('getNearestStore')}}',['userAddressInput'],'contextual_panel'); centerMap()"/>
      </div>
      <div id="contextual_panel"></div>
	  <div id="loading"><img src="{{=URL('static','images/loader.gif')}}"/></div>
    </div>

  </body>

</html>